﻿@{
    ViewBag.Title = "Smart Pay";
}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "frmSignature" } )) {
    <div>
        <ul class="sigNav">
            <li class="drawIt"><a href="#draw-it">Firma</a></li>
            <li class="clearButton"><a href="#clear">Borrar</a></li>
        </ul>
        <div class="sig sigWrapper">
            <canvas class="pad" width="285" height="55"></canvas>
            <input type="hidden" name="output" class="output">
        </div>
    </div>
    <div data-role="fieldcontain">
        <label for="txtEmail">
            Correo Electronico (opcional para recibir factura)
        </label>
        <input name="txtEmail" id="txtEmail" placeholder="correo@dominio.com" value="" type="email">
    </div>
    <button type="submit">Firmar</button>
}

@section styles {
    <link rel="stylesheet" href="http://static.thomasjbradley.ca/signature-pad/jquery.signaturepad.css">
    <style>
        .sigPad {
          margin: 0;
          padding: 0;
          width: 285px; /* Change the width */
        }

        .sigWrapper {
          clear: both;
          height: 55px; /* Change the height */
          border: 1px solid #ccc;
        }
    </style>
}

@section scripts {
    <!--[if lt IE 9]><script src="http://static.thomasjbradley.ca/signature-pad/flashcanvas.js"></script><![endif]-->
    <script src="http://static.thomasjbradley.ca/signature-pad/jquery.signaturepad.min.js"></script>
    <script src="http://static.thomasjbradley.ca/signature-pad/json2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#frmSignature').signaturePad({ drawOnly: true });
        });
    </script>
}